21 Juli 2025Bahasa Indonesia

Jelajahi kehebatan Web Components, dengan fokus pada Custom Elements, untuk membangun komponen UI yang dapat digunakan kembali dan terenkapsulasi di berbagai aplikasi web.

Web Components: Ulasan Mendalam tentang Custom Elements

Web Components merupakan kemajuan signifikan dalam pengembangan web, menawarkan cara standar untuk membuat komponen UI yang dapat digunakan kembali dan terenkapsulasi. Di antara teknologi inti yang menyusun Web Components, Custom Elements menonjol sebagai landasan untuk mendefinisikan tag HTML baru dengan perilaku dan rendering kustom. Panduan komprehensif ini menggali seluk-beluk Custom Elements, menjelajahi manfaat, implementasi, dan praktik terbaiknya untuk membangun aplikasi web modern.

Apa itu Web Components?

Web Components adalah seperangkat standar web yang memungkinkan pengembang untuk membuat elemen HTML yang dapat digunakan kembali, terenkapsulasi, dan dapat dioperasikan. Mereka menawarkan pendekatan modular untuk pengembangan web, memungkinkan pembuatan komponen UI kustom yang dapat dengan mudah dibagikan dan digunakan kembali di berbagai proyek dan kerangka kerja. Teknologi inti di balik Web Components meliputi:

Custom Elements: Mendefinisikan tag HTML baru dan perilaku terkaitnya.
Shadow DOM: Menyediakan enkapsulasi dengan membuat pohon DOM terpisah untuk sebuah komponen, melindungi gaya dan skripnya dari lingkup global.
Template HTML: Mendefinisikan struktur HTML yang dapat digunakan kembali yang dapat diinstansiasi dan dimanipulasi menggunakan JavaScript.

Memahami Custom Elements

Custom Elements adalah jantung dari Web Components, yang memungkinkan pengembang untuk memperluas kosakata HTML dengan elemen mereka sendiri. Elemen kustom ini berperilaku seperti elemen HTML standar, tetapi dapat disesuaikan dengan kebutuhan aplikasi tertentu, memberikan fleksibilitas dan organisasi kode yang lebih besar.

Mendefinisikan Custom Elements

Untuk mendefinisikan sebuah elemen kustom, Anda perlu menggunakan metode customElements.define(). Metode ini memerlukan dua argumen:

Nama elemen: Sebuah string yang mewakili nama elemen kustom. Nama tersebut harus mengandung tanda hubung (-) untuk menghindari konflik dengan elemen HTML standar. Misalnya, elemen-saya adalah nama yang valid, sedangkan elemensaya tidak.
Kelas elemen: Sebuah kelas JavaScript yang memperluas HTMLElement dan mendefinisikan perilaku elemen kustom tersebut.

Berikut adalah contoh dasarnya:

            class MyElement extends HTMLElement {
  constructor() {
    super();
    this.innerHTML = 'Halo, Dunia!';
  }
}

customElements.define('my-element', MyElement);

Dalam contoh ini, kita mendefinisikan sebuah elemen kustom bernama my-element. Kelas MyElement memperluas HTMLElement dan mengatur HTML dalam elemen tersebut menjadi "Halo, Dunia!" di dalam konstruktor.

Callback Siklus Hidup Custom Element

Elemen kustom memiliki beberapa callback siklus hidup yang memungkinkan Anda menjalankan kode pada berbagai tahap siklus hidup elemen. Callback ini memberikan kesempatan untuk menginisialisasi elemen, merespons perubahan atribut, dan membersihkan sumber daya saat elemen dihapus dari DOM.

connectedCallback(): Dipanggil saat elemen dimasukkan ke dalam DOM. Ini adalah tempat yang baik untuk melakukan tugas inisialisasi, seperti mengambil data atau menambahkan event listener.
disconnectedCallback(): Dipanggil saat elemen dihapus dari DOM. Ini adalah tempat yang baik untuk membersihkan sumber daya, seperti menghapus event listener atau melepaskan memori.
attributeChangedCallback(name, oldValue, newValue): Dipanggil saat atribut elemen diubah. Callback ini memungkinkan Anda untuk merespons perubahan atribut dan memperbarui rendering elemen. Anda perlu menentukan atribut mana yang akan diamati menggunakan getter observedAttributes.
adoptedCallback(): Dipanggil saat elemen dipindahkan ke dokumen baru.

Berikut adalah contoh yang mendemonstrasikan penggunaan callback siklus hidup:

            class MyElement extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({mode: 'open'});
  }

  connectedCallback() {
    this.shadow.innerHTML = `Terhubung ke DOM!`;
    console.log('Elemen terhubung');
  }

  disconnectedCallback() {
    console.log('Elemen terputus');
  }

  static get observedAttributes() { return ['data-message']; }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'data-message') {
      this.shadow.innerHTML = `${newValue}`;
    }
  }
}

customElements.define('my-element', MyElement);

Dalam contoh ini, connectedCallback() mencatat pesan ke konsol dan mengatur HTML dalam elemen saat terhubung ke DOM. disconnectedCallback() mencatat pesan saat elemen terputus. attributeChangedCallback() dipanggil saat atribut data-message berubah, memperbarui konten elemen. Getter observedAttributes menentukan bahwa kita ingin mengamati perubahan pada atribut data-message.

Menggunakan Shadow DOM untuk Enkapsulasi

Shadow DOM menyediakan enkapsulasi untuk web components, memungkinkan Anda membuat pohon DOM terpisah untuk komponen yang terisolasi dari sisa halaman. Ini berarti bahwa gaya dan skrip yang didefinisikan di dalam Shadow DOM tidak akan memengaruhi sisa halaman, dan sebaliknya. Enkapsulasi ini membantu mencegah konflik dan memastikan bahwa komponen Anda berperilaku secara dapat diprediksi.

Untuk menggunakan Shadow DOM, Anda dapat memanggil metode attachShadow() pada elemen. Metode ini memerlukan objek opsi yang menentukan mode Shadow DOM. mode bisa berupa 'open' atau 'closed'. Jika mode adalah 'open', Shadow DOM dapat diakses dari JavaScript menggunakan properti shadowRoot dari elemen tersebut. Jika mode adalah 'closed', Shadow DOM tidak dapat diakses dari JavaScript.

Berikut adalah contoh yang mendemonstrasikan penggunaan Shadow DOM:

            class MyElement extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
    this.shadow.innerHTML = `
      
      Ini di dalam Shadow DOM.
    `;
  }
}

customElements.define('my-element', MyElement);

Dalam contoh ini, kita melampirkan Shadow DOM ke elemen dengan mode: 'open'. Kita kemudian mengatur HTML dalam Shadow DOM untuk menyertakan gaya yang mengatur warna paragraf menjadi biru dan elemen paragraf dengan beberapa teks. Gaya yang didefinisikan di dalam Shadow DOM hanya akan berlaku untuk elemen di dalam Shadow DOM, dan tidak akan memengaruhi paragraf di luar Shadow DOM.

Manfaat Menggunakan Custom Elements

Custom Elements menawarkan beberapa manfaat untuk pengembangan web:

Dapat Digunakan Kembali (Reusability): Custom Elements dapat digunakan kembali di berbagai proyek dan kerangka kerja, mengurangi duplikasi kode dan meningkatkan kemudahan pemeliharaan.
Enkapsulasi: Shadow DOM menyediakan enkapsulasi, mencegah konflik gaya dan skrip serta memastikan komponen berperilaku secara dapat diprediksi.
Interoperabilitas: Custom Elements didasarkan pada standar web, membuatnya dapat dioperasikan dengan teknologi dan kerangka kerja web lainnya.
Kemudahan Pemeliharaan (Maintainability): Sifat modular dari Web Components membuatnya lebih mudah untuk memelihara dan memperbarui kode. Perubahan pada sebuah komponen terisolasi, mengurangi risiko merusak bagian lain dari aplikasi.
Kinerja: Custom Elements dapat meningkatkan kinerja dengan mengurangi jumlah kode yang perlu di-parse dan dieksekusi. Mereka juga memungkinkan rendering dan pembaruan yang lebih efisien.

Contoh Praktis Custom Elements

Mari kita jelajahi beberapa contoh praktis tentang bagaimana Custom Elements dapat digunakan untuk membangun komponen UI umum.

Komponen Penghitung Sederhana

Contoh ini menunjukkan cara membuat komponen penghitung sederhana menggunakan Custom Elements.

            class Counter extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
    this._count = 0;
    this.render();
  }

  connectedCallback() {
    this.shadow.querySelector('.increment').addEventListener('click', () => {
      this.increment();
    });
    this.shadow.querySelector('.decrement').addEventListener('click', () => {
      this.decrement();
    });
  }

  increment() {
    this._count++;
    this.render();
  }

  decrement() {
    this._count--;
    this.render();
  }

  render() {
    this.shadow.innerHTML = `
      
      
        
        ${this._count}
        
      
    `;
  }
}

customElements.define('my-counter', Counter);

Kode ini mendefinisikan kelas Counter yang memperluas HTMLElement. Konstruktor menginisialisasi komponen, melampirkan Shadow DOM, dan mengatur hitungan awal menjadi 0. Metode connectedCallback() menambahkan event listener ke tombol tambah dan kurang. Metode increment() dan decrement() memperbarui hitungan dan memanggil metode render() untuk memperbarui rendering komponen. Metode render() mengatur HTML dalam Shadow DOM untuk menyertakan tampilan penghitung dan tombol.

Komponen Korsel Gambar

Contoh ini menunjukkan cara membuat komponen korsel gambar menggunakan Custom Elements. Untuk singkatnya, sumber gambar adalah placeholder dan dapat dimuat secara dinamis dari API, CMS, atau penyimpanan lokal. Gaya juga telah diminimalkan.

            class ImageCarousel extends HTMLElement {
 constructor() {
  super();
  this.shadow = this.attachShadow({ mode: 'open' });
  this._images = [
  'https://via.placeholder.com/350x150',
  'https://via.placeholder.com/350x150/0077bb',
  'https://via.placeholder.com/350x150/00bb77',
  ];
  this._currentIndex = 0;
  this.render();
 }

 connectedCallback() {
  this.shadow.querySelector('.prev').addEventListener('click', () => {
  this.prevImage();
  });
  this.shadow.querySelector('.next').addEventListener('click', () => {
  this.nextImage();
  });
 }

 nextImage() {
  this._currentIndex = (this._currentIndex + 1) % this._images.length;
  this.render();
 }

 prevImage() {
  this._currentIndex = (this._currentIndex - 1 + this._images.length) % this._images.length;
  this.render();
 }

 render() {
  this.shadow.innerHTML = `
  
  
  
  
  
  
  
  
  `;
 }
}

customElements.define('image-carousel', ImageCarousel);

Kode ini mendefinisikan kelas ImageCarousel yang memperluas HTMLElement. Konstruktor menginisialisasi komponen, melampirkan Shadow DOM, dan mengatur array gambar awal dan indeks saat ini. Metode connectedCallback() menambahkan event listener ke tombol sebelumnya dan berikutnya. Metode nextImage() dan prevImage() memperbarui indeks saat ini dan memanggil metode render() untuk memperbarui rendering komponen. Metode render() mengatur HTML dalam Shadow DOM untuk menyertakan gambar saat ini dan tombol.

Praktik Terbaik untuk Bekerja dengan Custom Elements

Berikut adalah beberapa praktik terbaik yang harus diikuti saat bekerja dengan Custom Elements:

Gunakan nama elemen yang deskriptif: Pilih nama elemen yang secara jelas menunjukkan tujuan komponen.
Gunakan Shadow DOM untuk enkapsulasi: Shadow DOM membantu mencegah konflik gaya dan skrip serta memastikan komponen berperilaku secara dapat diprediksi.
Gunakan callback siklus hidup dengan tepat: Gunakan callback siklus hidup untuk menginisialisasi elemen, merespons perubahan atribut, dan membersihkan sumber daya saat elemen dihapus dari DOM.
Gunakan atribut untuk konfigurasi: Gunakan atribut untuk mengkonfigurasi perilaku dan penampilan komponen.
Gunakan event untuk komunikasi: Gunakan event kustom untuk berkomunikasi antar komponen.
Sediakan pengalaman fallback: Pertimbangkan untuk menyediakan pengalaman fallback untuk browser yang tidak mendukung Web Components. Ini dapat dilakukan dengan menggunakan progressive enhancement.
Pikirkan tentang internasionalisasi (i18n) dan lokalisasi (l10n): Saat mengembangkan web components, pertimbangkan bagaimana mereka akan digunakan dalam berbagai bahasa dan wilayah. Rancang komponen Anda agar mudah diterjemahkan dan dilokalkan. Misalnya, eksternalkan semua string teks dan sediakan mekanisme untuk memuat terjemahan secara dinamis. Pastikan format tanggal dan waktu, simbol mata uang, dan pengaturan regional lainnya ditangani dengan benar.
Pertimbangkan aksesibilitas (a11y): Web components harus dirancang dengan mempertimbangkan aksesibilitas sejak awal. Gunakan atribut ARIA jika perlu untuk memberikan informasi semantik kepada teknologi bantu. Pastikan navigasi keyboard didukung sepenuhnya dan kontras warna cukup bagi pengguna dengan gangguan penglihatan. Uji komponen Anda dengan pembaca layar untuk memverifikasi aksesibilitasnya.

Custom Elements dan Framework

Custom Elements dirancang agar dapat dioperasikan dengan teknologi dan kerangka kerja web lainnya. Mereka dapat digunakan bersama dengan kerangka kerja populer seperti React, Angular, dan Vue.js.

Menggunakan Custom Elements di React

Untuk menggunakan Custom Elements di React, Anda cukup merendernya seperti elemen HTML lainnya. Namun, Anda mungkin perlu menggunakan ref untuk mengakses elemen DOM yang mendasarinya dan berinteraksi dengannya secara langsung.

            import React, { useRef, useEffect } from 'react';

function MyComponent() {
  const myElementRef = useRef(null);

  useEffect(() => {
    if (myElementRef.current) {
      // Mengakses API elemen kustom
      myElementRef.current.addEventListener('custom-event', (event) => {
        console.log('Event kustom diterima:', event.detail);
      });
    }
  }, []);

  return ;
}

export default MyComponent;

Dalam contoh ini, kita menggunakan ref untuk mengakses elemen kustom my-element dan menambahkan event listener padanya. Ini memungkinkan kita untuk mendengarkan event kustom yang dikirim oleh elemen kustom dan meresponsnya.

Menggunakan Custom Elements di Angular

Untuk menggunakan Custom Elements di Angular, Anda perlu mengkonfigurasi Angular untuk mengenali elemen kustom tersebut. Ini dapat dilakukan dengan menambahkan elemen kustom ke dalam array schemas dalam konfigurasi modul.

            import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

Setelah elemen kustom terdaftar, Anda dapat menggunakannya di template Angular Anda seperti elemen HTML lainnya.

Menggunakan Custom Elements di Vue.js

Vue.js juga mendukung Custom Elements secara native. Anda dapat menggunakannya langsung di template Anda tanpa konfigurasi khusus.

Vue akan secara otomatis mengenali elemen kustom dan merendernya dengan benar.

Pertimbangan Aksesibilitas

Saat membangun Custom Elements, sangat penting untuk mempertimbangkan aksesibilitas untuk memastikan bahwa komponen Anda dapat digunakan oleh semua orang, termasuk orang dengan disabilitas. Berikut adalah beberapa pertimbangan aksesibilitas utama:

HTML Semantik: Gunakan elemen HTML semantik jika memungkinkan untuk memberikan struktur yang bermakna pada komponen Anda.
Atribut ARIA: Gunakan atribut ARIA untuk memberikan informasi semantik tambahan kepada teknologi bantu, seperti pembaca layar.
Navigasi Keyboard: Pastikan komponen Anda dapat dinavigasi menggunakan keyboard. Ini sangat penting untuk elemen interaktif, seperti tombol dan tautan.
Kontras Warna: Pastikan ada kontras warna yang cukup antara teks dan warna latar belakang agar teks dapat dibaca oleh orang dengan gangguan penglihatan.
Manajemen Fokus: Kelola fokus dengan benar untuk memastikan bahwa pengguna dapat dengan mudah menavigasi melalui komponen Anda.
Pengujian dengan teknologi bantu: Uji komponen Anda dengan teknologi bantu, seperti pembaca layar, untuk memastikan bahwa mereka dapat diakses.

Internasionalisasi dan Lokalisasi

Saat mengembangkan Custom Elements untuk audiens global, penting untuk mempertimbangkan internasionalisasi (i18n) dan lokalisasi (l10n). Berikut adalah beberapa pertimbangan utama:

Arah Teks: Dukung arah teks dari kiri ke kanan (LTR) dan dari kanan ke kiri (RTL).
Format Tanggal dan Waktu: Gunakan format tanggal dan waktu yang sesuai untuk berbagai lokal.
Simbol Mata Uang: Gunakan simbol mata uang yang sesuai untuk berbagai lokal.
Terjemahan: Sediakan terjemahan untuk semua string teks di komponen Anda.
Pemformatan Angka: Gunakan pemformatan angka yang sesuai untuk berbagai lokal.

Kesimpulan

Custom Elements adalah alat yang ampuh untuk membangun komponen UI yang dapat digunakan kembali dan terenkapsulasi. Mereka menawarkan beberapa manfaat untuk pengembangan web, termasuk kemampuan untuk digunakan kembali, enkapsulasi, interoperabilitas, kemudahan pemeliharaan, dan kinerja. Dengan mengikuti praktik terbaik yang diuraikan dalam panduan ini, Anda dapat memanfaatkan Custom Elements untuk membangun aplikasi web modern yang kuat, mudah dipelihara, dan dapat diakses oleh audiens global. Seiring standar web terus berkembang, Web Components, termasuk Custom Elements, akan menjadi semakin penting untuk membuat aplikasi web yang modular dan skalabel.

Rangkullah kekuatan Custom Elements untuk membangun masa depan web, satu komponen pada satu waktu. Ingatlah untuk mempertimbangkan aksesibilitas, internasionalisasi, dan lokalisasi untuk memastikan komponen Anda dapat digunakan oleh semua orang, di mana saja.